<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Test</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body onload="display()">
<table class="table table-hover">
    <thead>
        <tr>
            <th>搜索关键词:</th>
            <th th:text="${searchKey}" id="searchKey"></th>
        </tr>
    </thead>
</table>
<table class="table table-hover">
    <thead>
    <tr>
        <th>类型</th>
        <th>id</th>
        <th>文件名</th>
        <th>相关度</th>
        <th>内容</th>
    </tr>
    </thead>
    <tbody id="td1">
    <tr>

    </tr>
    </tbody>
</table>
</body>
<script type="text/javascript">
    var display=function (){
        keys=document.getElementById("searchKey").innerHTML;
        var url = "http://localhost:8080/display?str="+keys;
        $.ajax({
            type: "GET",
            url: url,
            data:{},
            dataType:"json",
            success: function(result){
                var str="";
                for(i=0;i<result.length;i++){
                    str+="<tr><td>"+"文件"+
                        "</td><td>"+result[i].id+
                        "</td><td>"+result[i].title+
                        "</td><td>"+result[i].score+
                        "</td><td>"+result[i].context+
                        "</td></tr>";
                }
                $("#td1").html(str);
            },
            error: function(){
                alert("error");
            }
        });
    }
</script>
</html>
